<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery-3.5.1.min.js" charset="utf-8"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
</head>

<body>
<form class="layui-form" action="">

    <fieldset class="layui-elem-field"  style="width: 50%;margin: auto;">
    <legend>发票1、</legend>
    <div class="layui-field-box">
        <a href="javascript:;" class="file">选择文件
            <input type="file" name="file" class="invoice" />
        </a>
        <span class="showFileName"></span>
    </div>
    <div>
        <img style="height: 150px;" src="" class="newimage" />
    </div>
    <label class="layui-form-label">输入金额：</label>
    <div class="layui-input-inline" style="float:left;width: 80%;">
        <input type="text" lay-verify="number" style="width: 25%;float: left" name="price_min" placeholder="元" autocomplete="off" class="layui-input">
        <label class="layui-form-label">发票种类：</label>
        <div class="layui-input-inline" style="width:25%;float: left">
            <select id="selectInvoice" name="quiz1" >
                <option value="" selected="">请选择种类</option>
                <option th:each="invoice:${findAllInvoiceType}" th:value="${invoice.id}" th:text="${invoice.dictValue}" ></option>
            </select>
        </div>
    </div>
    </div>
</fieldset>

</div>
    <div class="layui-form-item" style="width: 50%;margin: auto" >

            <button type="button" id="addInvoice" class="layui-btn">添加发票</button>
            <button type="submit" class="layui-btn"  id="demotijiao" lay-filter="demo1" style="margin-left: 75%">立即提交</button>
            <div style="margin-left: 460px" class="layui-form-mid layui-word-aux">验证密码成功后，再次点击提交</div>
     </div>
</form>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
              var $ = layui.jquery
            ,upload = layui.upload
            ,laydate = layui.laydate;
        //监听提交
        var verification=false;
        form.on('submit(demo1)', function(data){
            var invoice = [];
           invoice.push($("#selectInvoice").val());
            $(".selectInvoice").each(function () {
                if (invoice.includes($(this).val())){
                    layer.msg("不允许重复人员");
                    return verification;
                }
                invoice.push($(this).val());
            })
            layer.prompt({title: '输入密码，并确认', formType: 1}, function(pass, index) {
                            if (pass == "123456") {
                                layer.close(index);
                                verification=true;
                            } else {
                                layer.msg('密码验证错误....');
                                verification=false;
                            }
                        });
            return verification;
        });
        //按钮变色
        $(".layui-form").on("change","input[type='file']",function(){
            //alert(123);
            var filePath=$(this).val();
            if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
                //$(this).parent().parent().find(".fileerrorTip").html("").hide();
                var arr=filePath.split('\\');
                var fileName=arr[arr.length-1];
                $(this).parent().parent().parent().find(".showFileName").html(fileName);
            }else{
                $(this).parent().parent().parent().find(".showFileName").html("");
                $(this).parent().parent().parent().find(".showFileName").html("您未上传文件，或者您上传文件类型有误！").show();
                form.render();
                return false
            }
            form.render();
        })

        //删除发票
            $(".layui-form").on("click",".layui-btn-danger",function(){
               // alert(456);
                $(this).parent().parent().remove();
                form.render();
            });

        //图片预览
        $(".layui-form").on("change",".invoice",function(){
            var objUrl = getObjectURL(this.files[0]);
            //console.log("objUrl = "+objUrl) ;
            $(this).parent().parent().parent().find(".newimage").attr("src", objUrl);
            form.render();
        });
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined)
            { // basic
                url = window.createObjectURL(file) ;
            }
            else if (window.URL!=undefined)
            {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            }
            else if (window.webkitURL!=undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            form.render();
            return url ;

        }
        //添加发票
        var number=1;
        var addInvoice = 1;
        $("#addInvoice").on("click",function () {
            number++;
            var d=" <fieldset class=\"layui-elem-field\"  style=\"width: 100%;margin: auto;\">\n" +
                "      <legend>发票"+number+"、</legend>\n" +
                "     <div class=\"layui-field-box\">\n" +
                "           <a href=\"javascript:;\" class=\"file\">选择文件\n" +
                "                   <input type=\"file\" name=\"file\" class=\"invoice\" />\n" +
                "              </a>\n" +
                "            <span class=\"showFileName\"></span>\n" +
                "        </div>\n" +
                "        <div>\n" +
                "            <img style=\"height: 150px;\" src=\"\" class=\"newimage\" />\n" +
                "        </div>\n" +
                "        <label class=\"layui-form-label\">输入金额：</label>\n" +
                "        <div class=\"layui-input-inline\"  lay-verify=\"number\" style=\"float:left;width: 80%;\">\n" +
                "            <input type=\"text\" style=\"width: 25%;float: left\" name=\"price_min\" placeholder=\"元\" autocomplete=\"off\" class=\"layui-input\">\n" +
                "            <button type=\"button\" style=\"float: left;margin-left: 300px;\" class=\"layui-btn layui-btn-danger\"><i class=\"layui-icon\"></i></button>\n" +
                "        </div>\n" +
                "        <label class=\"layui-form-label\">发票种类：</label>\n" +
                "        <div class=\"layui-input-inline\" style=\"width:25%;float: left\">\n" +
                "            <select class='selectInvoice' lay-verify=\"required\">\n" +
                                    $("#selectInvoice").html();
                "            </select>\n" +
                "        </div>\n" +
                "        </div>\n" +
                "    </fieldset>";
            $(d).insertBefore("#addInvoice");
            form.render();
            addInvoice++;
        })
    });
</script>
</html>